<template>
  <!-- 添加无线传感网络的弹窗 -->
  <el-dialog :visible.sync="newPlanDialog" width="800px" @close="closeDialog">
    <span slot="title" class="dialog-title f-large">
      <h3 class="text-c-gray">
        <i :class="['fa', icon, 'm-r-10']"></i>{{ title }}
      </h3>
    </span>
    <PlanForm ref="planForm" :model="botton" />
    <span slot="footer" class="dialog-footer">
      <el-button type="info" plain round @click="createLine">生成路线</el-button>
      <el-button type="warning" @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="addOrEditPlan">{{
        botton
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import PlanForm from './PlanForm.vue';
export default {
  name: "MapDialog",
  components: { PlanForm },
  data() {
    return {
      title: "添加新计划",
      botton: "添加",
      icon: "fa-plus-square-o",
      newPlanDialog: false,
    };
  },
  methods: {
    // 打开并加载地图窗口
    addView() {
      this.botton = "添加";
      this.title = "添加新计划";
      this.icon = "fa-plus-square-o";
    },
    // 打开编辑窗口
    editView(item) {
      this.botton = "保留修改";
      this.title = "编辑";
      this.icon = "fa-edit";
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.planForm?.editModel(item);
        }, 250);
      })
    },
    // 窗口关闭按钮
    closeDialog() {
      this.newPlanDialog = false;
      this.$refs.planForm?.close();
    },
    // 窗口-生成路线
    createLine() {
      this.$refs.planForm?.createLine();
    },
    // 窗口-添加/编辑计划
    addOrEditPlan() {
      this.$refs.planForm?.addOrEditPlan();
    }
  },
};
</script>

<style scoped lang="less">
/deep/ .el-dialog__body {
  padding: 20px 20px;
  border-bottom: 1px solid #d3d4d6;
  border-top: 1px solid #d3d4d6;
}
</style>